<script>
import dataApi from '@/view/data-api-edit'
import DelIco from '@/view/ico/del'
import AddIco from '@/view/ico/add'
import fileSelect from '../comm/file-select'
import ajaxApi from '../ajax-api'
export default {
  data () {
    return {
      maxCount: 3,
      progressText: '',
      isUploading: false
    }
  },
  computed: {
    count () {
      return dataApi.currActiveItem.videos.length
    },
    allowAdd () {
      let { maxCount } = this
      if (maxCount) {
        return this.count < maxCount
      }
      return true
    }
  },
  methods: {
    onAdd () {
      this.upload().finally(() => {
        this.isUploading = false
      })
    },
    onDel (index) {
      dataApi.currActiveItem.videos.splice(index, 1)
    },
    onAbort () {
      this.abortFileUpload()
    },
    async upload () {
      const file = await fileSelect({
        accept: 'video/mp4',
        fileSizeLimit: 100,
        onError: (error) => {
          this.$toast.error(error.message)
        }
      })
      this.isUploading = true
      const { url } = await ajaxApi.fileUpload({
        file,
        onProgress: (p) => {
          this.progressText = ~~(p * 100) + '%'
        },
        cancelToken: cancel => {
          this.abortFileUpload = cancel
        }
      })
      this.progressText = ''
      dataApi.currActiveItem.videos.push({
        name: file.name,
        src: url
      })
    }
  },
  render () {
    let { progressText, $style, isUploading } = this
    let itemData = dataApi.currActiveItem

    let lis = []
    itemData.videos.forEach(({ name }, i) => {
      lis.push(<li class="v-item" key={i}><a class={$style.del} href="javascript:;" onClick={this.onDel}><DelIco class="del-ico"/></a><span class="n">{name}</span></li>)
    })
    lis.push(<li class="v-item">
      <a v-show={!isUploading && this.allowAdd} href="javascript:;" onClick={this.onAdd}><AddIco class="add-ico"/><span>增加视频</span></a>
      <a v-show={isUploading} href="javascript:;" onClick={this.onAbort}><span>{progressText}</span> 终止</a>
    </li>)
    return (
      <div>
        <div class="set-item">
          <div class="tit">
            <label class={$style.mid}>
              <input type="checkbox" checked={itemData.allowSound} onChange={e => { itemData.allowSound = e.target.checked }} />允许声音({itemData.allowSound ? '允许' : '不允许'})
            </label>
          </div>
        </div>
        <div class="set-item">
          <div class="tit">上传视频</div>
          <div class="it">
            <ul class="v-list">
              {lis}
            </ul>
          </div>
        </div>
      </div>
    )
  }
}
</script>

<style scoped>
.del-ico {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  color: #f52f2f;
}
.add-ico {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  color: #00b7ee;
  vertical-align: -5px;
}
.v-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.v-item {
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.n {
  vertical-align: middle;
}
</style>

<style module>
.del {
  vertical-align: -5px;
}
.mid *{
  vertical-align: middle;
}
</style>
